<template>
    <Panel>
        <Tabs>
            <Tab name="Details" :selected="true">
                <div class="panel__pad">
                    <div class="row">
                        <div class="col-medium-1-7">
                            <KeyValue label="Category" :value="asset.category"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="Class" :value="asset.class"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="Type" :value="asset.type"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="Vertical Market" :value="asset.vertical"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="Commission Date" :value="asset.commission_date_text"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="Age" :value="asset.age"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="Insurance Co." :value="asset.insurance_co"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="Coverage Type" :value="asset.coverage_type"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="Policy ID" :value="asset.policy_id"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="EnergyStar ID" :value="asset.energy_star_id"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="EnergyStar Score" :value="asset.energy_star_score"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="Asset Grade" :value="asset.grade"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="Market Valuation" :value="asset.market_valuation"></KeyValue>
                        </div>
                        <div class="col-medium-1-7">
                            <KeyValue label="Network Meters" :value="asset.network_meters_text"></KeyValue>
                        </div>
                    </div>
                </div>

                <div class="panel__secondary">
                    <div class="panel__title">Utility Provider</div>
                    <div class="panel__pad">
                        <div class="row">
                            <div class="col-medium-1-7">
                                <KeyValue label="Electricity" value="Pacific Gas &amp; Electric Company"></KeyValue>
                            </div>
                            <div class="col-medium-1-7">
                                <KeyValue label="Natural Gas" value="Pacific Gas &amp; Electric Company"></KeyValue>
                            </div>
                            <div class="col-medium-1-7">
                                <KeyValue label="Water" value="California Water Services"></KeyValue>
                            </div>
                            <div class="col-medium-1-7">
                                <KeyValue label="Waste" value="Waste Management"></KeyValue>
                            </div>
                        </div>
                    </div>

                </div>
            </Tab>
            <Tab name="Location">
                Location
            </Tab>
            <Tab name="Certifications">
                Certifications
            </Tab>
            <Tab name="Compliance">
                Compliance
            </Tab>
            <Tab name="KPIs">
                KPIs
            </Tab>
            <Tab name="Incentives">
                Incentives
            </Tab>
            <Tab name="Key Contacts">
                Key Contacts
            </Tab>
        </Tabs>
    </Panel>
</template>
<script>
    import KeyValue from './KeyValue.vue'
    import Panel from './Panel.vue'
    import Tab from './Tab.vue'
    import Tabs from './Tabs.vue'

    export default {

        components: {
            Panel,
            KeyValue,
            Tab,
            Tabs
        },

        props: [
            'asset'
        ]

    }
</script>